<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>xpxw图书馆首页</title>
    <!--    <script src="../static/js/jquery-3.6.0.min.js"></script>-->
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
    <div class="mask">
        <div class="re-pwd">
            <div class="title">
                <span>修改密码</span>
                <div class="close">×</div>
            </div>
            <div class="new-pwd">
                <div class="lf">
                    <ul>
                        <li>旧密码：</li>
                        <li>新密码：</li>
                    </ul>
                </div>
                <div class="lr">
                    <ul>
                        <li><input type="password" id="old-pwd"></li>
                        <li><input type="password" id="new-pwd"></li>
                    </ul>
                </div>
            </div>
            <div class="re-btn"><button id="yes">确认修改</button></div>
        </div>
    </div>
<header>
    <div class="header-title">网上借书系统</div>
    <div class="header-right">
        <a href="login.html">登录</a><a href="register.html">注册</a>
    </div>
    <div class="login-after">
        <div class="move">
            尊敬的<span id="uname"></span>用户，您好
        <ul id="info">
            <li id="my-message">个人信息</li>
            <li id="record">借书记录</li>
            <li id="consume">消费记录</li>
            <li id="re-pwd">修改密码</li>
        </ul>
        </div>
        <a href="#" id="back">退出登录</a>
    </div>
</header>
<div class="search">
    <input type="text" placeholder="输入搜索内容" id="search-val">
    <button id="search">搜索</button>
</div>
<nav>
    <ul id="types">
        <li id="result">搜索结果</li>
        <li class="current" onclick="getBookByType(0)">全部</li>
        <!--            <li>教育</li>-->
        <!--            <li>生活</li>-->
        <!--            <li>经营</li>-->
        <!--            <li>小说</li>-->
        <!--            <li>社科</li>-->
        <!--            <li>文艺</li>-->
    </ul>
</nav>
<div class="mid w">
    <div class="main">
        <ul id="books">
            <!--                <li>-->
            <!--                    <div class="img">-->
            <!--                        <img src="img/p1.jpg" alt="">-->
            <!--                    </div>-->
            <!--                    <span>巴黎圣母院</span>-->
            <!--                    <div class="autor">[法]雨果 著 李玉明 译</div>-->
            <!--                    <div class="money">￥37.8</div>-->
            <!--                </li>-->
        </ul>
    </div>
</div>
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $("#search").click(function (){
        $.ajax({
            type:'get',
            url:"http://120.76.130.104:9000/book/getBookByTypeOrByName",
            data:{
                author:$("#search-val").val(),
                name:$("#search-val").val(),
            },
            success(data, text, http) {
                $("#books").empty();
                $("#result").addClass("current").siblings().removeClass("current")
                $.each(data.data, function (i, ele) {
                    $("#books").append(" <li id=" + ele.id + ">\n" +
                        "                    <div class=\"img\">\n" +
                        "                        <img src=\"img/" + ele.url + "\" alt=\"\">\n" +
                        "                    </div>\n" +
                        "                    <span>" + ele.name + "</span>\n" +
                        "                    <div class=\"autor\">作者：" + ele.author + "</div>\n" +
                        "                    <div class=\"money\">￥" + ele.price + "</div>\n" +
                        "                </li>")
                })
                console.log(data)
                $("#books li").click(function () {
                    localStorage.setItem("bookId", $(this).attr("id"))
                    window.location = "detail.html"
                    // window.open("detail.html")
                    // console.log($(this).attr("id"))
                })
            }
        })
    })




    var num = 0;
    $.ajax({
        type: "get",
        url: "http:120.76.130.104:9000/book/getAllBook",
        success: function (data, text, http) {
            if (data.msg == "查询成功") {
                num = data.data;//数据的数量
            }
        }
    })
    $.ajax({
        type: "get",
        url: "http://120.76.130.104:9000/book/getAllBookByPage",
        data: {
            page: 1,
            num: 10,
        },
        success(data, text, http) {
            $.each(data.data, function (i, ele) {
                $("#books").append(" <li id="+ele.id+">\n" +
                    "                    <div class=\"img\">\n" +
                    "                        <img src=\"img/" + ele.url + "\" alt=\"\">\n" +
                    "                    </div>\n" +
                    "                    <span>" + ele.name + "</span>\n" +
                    "                    <div class=\"autor\">作者：" + ele.author + "</div>\n" +
                    "                    <div class=\"money\">￥" + ele.price + "</div>\n" +
                    "                </li>")
            })
            console.log(data)
            $("#books li").click(function (){

                localStorage.setItem("bookId",$(this).attr("id"))
                window.location = "detail.html"
                // window.open("detail.html")
                // console.log($(this).attr("id"))
            })
        }
    })
    function getBookByType(typeId) {
        $.ajax({
            type: "get",
            url: "http://120.76.130.104:9000/book/getBookByType",
            data: {
                id: typeId,
                page: 1,
                num: 10,
            },
            success: function (data, text, http) {
                $("#books").empty();
                $.each(data.data, function (i, ele) {
                    $("#books").append(" <li>\n" +
                        "                    <div class=\"img\">\n" +
                        "                        <img src=\"img/" + ele.url + "\" alt=\"\">\n" +
                        "                    </div>\n" +
                        "                    <span>" + ele.name + "</span>\n" +
                        "                    <div class=\"autor\">作者：" + ele.author + "</div>\n" +
                        "                    <div class=\"money\">￥" + ele.price + "</div>\n" +
                        "                </li>")
                })
                $("#books li").click(function (){

                    localStorage.setItem("bookId",$(this).attr("id"))
                    window.location = "detail.html"
                    // window.open("detail.html")
                    // console.log($(this).attr("id"))
                })
            }
        })
    }

    $.ajax({
        type: "get",
        url: "http://120.76.130.104:9000/book/getAllType",
        success: function (data, text, http) {
            $.each(data.data, function (i, ele) {
                $("#types").append("<li onclick="+"getBookByType("+(i+1)+")"+">" + ele.type + "</li>\n")
            })
            $("#types li").click(function (){
                $(this).addClass("current").siblings().removeClass("current")
            })
        }
    })















    $(document).ready(function () {
        let data = localStorage.getItem("name")
            if (data != null) {
                document.querySelector(".login-after").style.display = "block";
                document.querySelector(".header-right").style.display = "none";
                document.getElementById("uname").innerHTML = data
            } else {
                document.querySelector(".login-after").style.display = "none";
                document.querySelector(".header-right").style.display = "block";
            }
        $("#consume").click(function (){
            window.location = "consume.html"
        })
        $(".move").hover(function (){
           $("#info").stop().slideToggle(200)
        })
        $("#back").click(function (){
            localStorage.clear();
            setTimeout("self.location.reload();",1);
        })
        $("#my-message").click(function (){
            window.location = "MyMessage.html"
        })
        $("#record").click(function (){
            window.location = "record.html"
        })
        $("#re-pwd").click(function (){
            $(".mask").show()
        })
        $(".close").click(function (){
            $(".mask").hide()
        })
        //弹窗随鼠标移动
        var pwd = document.querySelector(".re-pwd")
        $(".title").mousedown(function (e){
            let x = e.pageX - pwd.offsetLeft;
            let y = e.pageY - pwd.offsetTop;
            document.addEventListener("mousemove",move)
            function move(e) {
                pwd.style.left = e.pageX - x + 'px';
                pwd.style.top = e.pageY - y + 'px';
            }
            //鼠标事件移除
            document.addEventListener('mouseup',function(){
                document.removeEventListener('mousemove', move);
            })
        })
        $("#yes").click(function (){
                if(localStorage.getItem("Token") == "" || localStorage.getItem("Token") == null){
                    localStorage.clear()
                    window.location = "login.html"
                }
                $.ajax({
                    type: "get",
                    url:"http://120.76.130.104:9000/user/modifyPassword",
                    data:{
                        newPassword: $("#new-pwd").val(),
                        oldPassword: $("#old-pwd").val(),
                    },
                    headers: {
                        Token: localStorage.getItem("Token")
                    },
                    success:function (data,text,xmlHttp){
                        if (xmlHttp.getResponseHeader("Token") == "timeOut" || xmlHttp.getResponseHeader("Token") == "false") {
                            alert(xmlHttp.getResponseHeader("Token"))
                            localStorage.clear()
                            window.location = "login.html"
                        }else {
                            console.log(data)
                            if(data.code == "001"){
                                localStorage.setItem("Token",xmlHttp.getResponseHeader("Token"))
                                alert("修改成功！请重新登录")
                                localStorage.clear()
                                window.location = "login.html"
                            }else{
                                alert(data.msg)
                            }
                        }

                    }
                })

        })
    })


</script>
</html>